import React, {useEffect, useState} from 'react';
import {message, Skeleton} from "antd";
import ProForm, {ProFormText} from "@ant-design/pro-form";
import {getWebSite, updateSetting} from "@/services/setting";

const SmsBao = () => {
  // 初始化数据状态
  const [initialValues, setInitialValues] = useState(undefined)

  // 渲染数据
  useEffect(async () => {
    const res = await getWebSite('smsbao')
    setInitialValues({
      user: res.user,
      password: res.password,
      template: res.template,
      signature: res.signature
    })
  },[])

  // 执行更新
  const updataSmsBao = async (value) => {
    const data = {
      name: 'smsbao',
      user: value.user,
      password: value.password,
      template: value.template,
      signature: value.signature

    }
    const response = await updateSetting(data);
    if (response.status === undefined) {
      message.success('修改成功')
    }
  }

  return (
    <span>
              {
                initialValues === undefined ?
                  <Skeleton avatar paragraph={{rows: 4}}/>
                  :
                  <ProForm
                    onFinish={(data) => {
                      updataSmsBao(data)
                    }}
                    initialValues={initialValues}
                    submitter={{
                      searchConfig: {
                        submitText: '提交',
                      },
                    }}
                  >
                    <ProFormText
                      name="user"
                      label="用户名"
                      placeholder="请输入用户名"
                      rules={[
                        {
                          required: true,
                          message: '请输入用户名',
                        },
                      ]}
                    />
                    <ProFormText.Password
                      name="password"
                      visibilityToggle={false}
                      label="密码"
                      placeholder="请输入密码"
                      rules={[
                        {
                          required: true,
                          message: '请输入密码',
                        },
                      ]}
                    />
                    <ProFormText
                      name="signature"
                      label="签名"
                      placeholder="请输入签名"
                      rules={[
                        {
                          required: true,
                          message: '请输入签名',
                        },
                      ]}
                    />
                    <ProFormText
                      name="template"
                      label="模板"
                      placeholder="请输入模板"
                      rules={[
                        {
                          required: true,
                          message: '请输入模板',
                        },
                      ]}
                    />
                  </ProForm>
              }
            </span>
  );
};

export default SmsBao;
